@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: rgb(19, 19, 19);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}

a:hover {
  color: #535bf2;
}

*,
html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow: auto;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

html,
body,
#root {
  height: auto;
  min-height: 100%;
  width: 100%;
  background-color: rgb(19, 19, 19);

}

@media (max-width: 768px) {

  html,
  body {
    overscroll-behavior-y: none;
  }
}

/* 高亮卡片样式 - 用于滚动到指定位置时的视觉提示 */
.highlight-card {
  animation: highlightPulse 2s ease-in-out;
  border-radius: 1.5rem;
}

@keyframes highlightPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(236, 72, 153, 0.3);
    transform: scale(1.02);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
    transform: scale(1);
  }
}

/* 隐藏滚动条工具类（PC端） */
@media (min-width: 1024px) {
  .scrollbar-hide {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Webkit */
  }
}

/* 自定义滚动条样式 - 主题样式 */
.custom-scrollbar {
  /* Firefox 滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: #ec4899 rgba(40, 40, 40, 0.3);
}

/* Webkit 浏览器滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(40, 40, 40, 0.3);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #ec4899;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #d946aa;
}

/* 细滚动条变体 */
.custom-scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #ec4899 transparent;
}

.custom-scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar-thin::-webkit-scrollbar-thumb {
  background: #ec4899;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.custom-scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #d946aa;
}

/* 移动端优化 - 更细的滚动条 */
@media (max-width: 768px) {
  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .custom-scrollbar-thin::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
}

/* 确保密码字符可见 */
input[type="password"] {
  color: white !important;
  text-shadow: 0 0 1px rgba(255,255,255,0.5);
  opacity: 1 !important;
  -webkit-text-security: disc !important;
  text-security: disc !important;
  font-family: system-ui, sans-serif !important;
}

/* 隐藏密码输入框的原生眼睛图标 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* Webkit浏览器隐藏密码输入框的原生眼睛图标 */
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
}

/* 隐藏密码输入框的原生显示/隐藏按钮 */
input[type="password"]::-webkit-contacts-auto-fill-button {
  display: none !important;
}

/* 隐藏密码输入框的原生眼睛图标（Chrome/Safari） */
input[type="password"]::-webkit-outer-spin-button,
input[type="password"]::-webkit-inner-spin-button {
  display: none;
}

/* 隐藏密码输入框的原生眼睛图标（Firefox） */
input[type="password"]::-moz-credentials-auto-fill-button {
  display: none !important;
}

/* PhoneInput 样式覆盖 - 使用更强的选择器 */
/* 下拉框容器背景 */
.react-phone-input-2 .country-list,
.react-phone-input-2__country-list {
  background: rgb(33, 37, 41) !important;
  color: white !important;
}

/* 搜索框样式 - 多种可能的class名 */
.react-phone-input-2 .search-box,
.react-phone-input-2__search-box,
.react-phone-input-2 .country-list .search-box,
.react-phone-input-2 input[type="search"] {
  background: red !important;
  color: white !important;
  border: 1px solid white !important;
  border-radius: 0.5rem !important;
}

.react-phone-input-2 .search-box:focus,
.react-phone-input-2__search-box:focus,
.react-phone-input-2 input[type="search"]:focus {
  background: red !important;
  color: white !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5) !important;
}

/* 下拉项默认样式 - 多种选择器 */
.react-phone-input-2 .country-list .country,
.react-phone-input-2__country-list .react-phone-input-2__country,
.react-phone-input-2 .country,
li[data-country-code] {
  background: rgb(33, 37, 41) !important;
  color: white !important;
}

/* 鼠标悬停和高亮选中的项 - 多种状态 */
.react-phone-input-2 .country-list .country:hover,
.react-phone-input-2 .country-list .country.highlight,
.react-phone-input-2 .country-list .country:focus,
.react-phone-input-2__country-list .react-phone-input-2__country:hover,
.react-phone-input-2__country-list .react-phone-input-2__country.react-phone-input-2__highlight,
.react-phone-input-2 .country:hover,
li[data-country-code]:hover,
li[data-country-code].highlight {
  background: rgb(31, 35, 39) !important;
  color: white !important;
}

/* 搜索结果为空时的提示 */
.react-phone-input-2 .no-entries-message,
.react-phone-input-2__no-entries-message {
  background: rgb(33, 37, 41) !important;
  color: white !important;
}

/* 额外的强制覆盖 - 适用于所有可能的结构 */
div[class*="country-list"] {
  background: rgb(33, 37, 41) !important;
}

div[class*="country-list"] input {
  background: red !important;
  color: white !important;
}

div[class*="country-list"] li:hover,
div[class*="country-list"] li.highlight {
  background: red !important;
  color: white !important;
}

/* 最强力的覆盖 - 针对所有可能的PhoneInput内部元素 */
.react-phone-input-2 * {
  box-sizing: border-box;
}

/* 通用搜索框覆盖 */
.react-phone-input-2 input[placeholder*="Search"],
.react-phone-input-2 input[placeholder*="search"],
.react-phone-input-2 input[class*="search"] {
  background: red !important;
  color: white !important;
  border: 1px solid white !important;
}

/* 通用列表项覆盖 */
.react-phone-input-2 ul li:hover,
.react-phone-input-2 ul li[class*="highlight"],
.react-phone-input-2 ul li:focus {
  background: red !important;
  color: white !important;
}

.selected-flag {
  background-color: rgb(28, 25, 23) !important;
  border-radius: 1rem !important;
}

.search {
  background-color: rgb(33, 37, 41) !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;

  .search-emoji {
    display: none !important;
  }

  .search-box {
    width: 90% !important;
    background-color: rgb(33, 37, 41) !important;
    border: none !important;
  }
}

.flag-dropdown {
  border-radius: 0.7rem 0 0 0.7rem !important;
}

/* Settings页面鼠标打灯效果 */
.mouse-light-settings {
  pointer-events: none;
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  z-index: 10;
  background: radial-gradient(circle 90px at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.38), rgba(0,0,0,0.0) 80%);
  transition: background 0.12s;
  mix-blend-mode: lighten;
}